

<!-- 面包屑导航 -->

<!-- 用户列表 -->
<template>
  <div class="main_welcome">


    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>文件管理</el-breadcrumb-item>
      <el-breadcrumb-item>文件列表</el-breadcrumb-item>
    </el-breadcrumb>

    <el-card>
      <el-row :gutter="25">
        <el-col :span="10">

          <el-input placeholder="请输入搜索内容" >
            <el-button slot="append" icon="el-icon-search" ></el-button>
          </el-input>
        </el-col>

        <el-col :span="4">
          <el-button type="primary" @click="addDialogVisible = true">查询文件</el-button>
        </el-col>
      </el-row>
    </el-card>
    <el-menu-item>分享文件如下</el-menu-item>


    <table class="table table-bordered table-hover">
      <thead>
      <th>用户名</th>
      <th>文件名</th>
      <th>大小</th>
      <th>时间</th>



      </thead>
      <tbody id="zuoye">





      </tbody>
      <tbody id="zuo">

      </tbody>
    </table>
  </div>
</template>




<script>
import axios from "axios";
import $ from 'jquery';
import Cookie from 'js-cookie';
var user=window.sessionStorage.getItem('username')


export default {
  data() {
    return {
      id:''
    }
  },
  methods: {
    getList() {

      $.ajax({
        url: "http://localhost:9074/docs",
        dataType: "json",
        success: function (resp) {
          $("#zuoye").empty();

          $.each(resp, function (i, n) {


            $("#zuoye").append("<tr><el-button type=\"text\" size=\"medium\"><i class=\"el-icon-folder\"></i></el-button></td><td>"+n.user+"</td><td class='m'><a class='a' href='http://localhost:9074/" + n.filename + "'>" + n.filename + "</a></td><td>"+n.min+"</td></td><td class='m'>" + n.ctime + "</td><td><el-button type='text' size='medium'><i class='el-icon-download'></i></el-button></td><td><el-button class='dele' type='text' size='medium'><i class='el-icon-delete'></i></el-button></td><td><el-button type=\"text\" size=\"medium\"><i class=\"el-icon-more-outline\"></i></el-button></td></tr>");

          })
        }

      })




    },


    getImg() {

      $.ajax({
        url: "http://localhost:9074/imgs",
        dataType: "json",
        success: function (resp) {
          $("#zuo").empty();

          $.each(resp, function (i, n) {


            $("#zuo").append("<tr><el-button type=\"text\" size=\"medium\"><i class=\"el-icon-folder\"></i></el-button></td><td>"+n.user+"</td><td class='m'><img width='100px' height='100px' src='http://localhost:9074/" + n.ctime + "'></td><td>"+n.min+"</td></td><td class='m'>" + n.pname+ "</td><td><el-button type='text' size='medium'><i class='el-icon-download'></i></el-button></td><td><el-button class='dele' type='text' size='medium'><i class='el-icon-delete'></i></el-button></td><td><el-button type=\"text\" size=\"medium\"><i class=\"el-icon-more-outline\"></i></el-button></td></tr>");

          })
        }

      })




    }

  },



  created() {
    this.getList();
    this.getImg();
  },
  computed:{
    showUsername(){
      return Cookie.get('username');
    }
  }

}
</script>
<style lang="less" scoped>
.a{
  text-decoration: none;
}
.uploader-example {
  width: 880px;
  padding: 15px;
  margin: 40px auto 0;
  font-size: 12px;
  box-shadow: 0 0 10px rgba(0, 0, 0, .4);
}
.uploader-example .uploader-btn {
  margin-right: 4px;
}
.uploader-example .uploader-list {
  max-height: 440px;
  overflow: auto;
  overflow-x: hidden;
  overflow-y: auto;
}
</style>
